<!DOCTYPE html>
<html>
 <head>
  <title>
   Creating a PixieApp Widget to Reuse UI Elements
  </title>
  <meta content="&#xA9;Copyright IBM Corporation 2018" name="copyright"/>
  <meta content="&#xA9;Copyright IBM Corporation 2018" name="DC.Rights.Owner"/>
  <meta content="&#xA9; Copyright IBM Corporation 2016, 2017, 2018" name="dcterms.rights"/>
  <meta content="2018-03-09" name="DC.date"/>
 </head>
 <body>
  <div>
   <h1>
    Creating a PixieApp Widget to Reuse UI Elements
   </h1>
   <p>
    Sometimes, you'll want to reuse complex UI constructs. In this case, you can package the HTML into a widget that can be easily called anywhere.
   </p>
   <ul>
    <li>
     <p>
      <strong>
       To define a widget:
      </strong>
      Use a route with a special
      <code>
       widget
      </code>
      attribute. To establish a proper binding, the value of
      <code>
       pd_widget
      </code>
      must match the route's widget value.
     </p>
    </li>
    <li>
     <p>
      <strong>
       To invoke a widget:
      </strong>
      Apply the pd_widget custom attribute to a &lt;div&gt; element and set its value to the same widget value defined in the route. For example:
     </p>
    </li>
   </ul>
   <pre>from pixiedust.display.app import *
@PixieApp
class TestPixieAppWidget():
    @route(widget='myWidget')
    def myWidget(self):
        return """&lt;div&gt;&lt;b&gt;Hello World Widget&lt;/b&gt;&lt;/div&gt;"""
    @route()
    def main(self):
        return """&lt;div pd_widget="myWidget"&gt;&lt;/div&gt;"""

TestPixieAppWidget().run(runInDialog='false')</pre>
   <p>
    <h3>
     Return to main topic for:
    </h3>
    <ul>
     <li>
      <a href="pixieapps.html">
       PixieApps: Use PixieDust to Generate UI Elements
      </a>
     </li>
    </ul>
   </p>
  </div>
 </body>
</html>
